<!--

-->
<template>
  <div>
    <textarea id="tinyEditor" v-model="content"></textarea>
  </div>
</template>
<script>
import ossConfig from "@/utils/ali-oss";
export default {
  data () {
    return {
      content: '',
      tinymce: null,
      initObj: {
        selector: "#tinyEditor", //选择器
        branding: false, //隐藏右下角技术支持
        language: "zh_CN", //设置中文
        draggable_modal: true, //是否允许拖动
        resize: false,
        elementpath: false,
        // convert_urls: false,
        plugins:
          "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize",
        toolbar:
          "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs",
        min_height: 700, //编辑器高度
        width: '90%',
        fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px",
        // importcss_append: true,
        //自定义文件选择器的回调内容
        images_upload_handler: (blobInfo, success, failure) => {
          console.log(blobInfo, success, failure,'==========');
          ossConfig(blobInfo.blob()).then(res=>{
            // console.log(res,'==========');
            if (res) {
              success(res.res.requestUrls[0])
            }else{
              failure("上传失败，请重新上传");
            }
          }).catch(err=>{
            failure("上传失败，请重新上传");
            console.log(err)
          })
        },
        autosave_ask_before_unload: false,
      },
    }
  },
  props: {
    value: [String]
  },
  mounted() {
    this.init();
  },
  beforeDestroy () {
    this.tinymce.destroy()
  },
  methods: {
    init() {
      this.tinymce = new tinymce.Editor('tinyEditor', this.initObj, tinymce.EditorManager);
      this.tinymce.render();
      this.tinymce.setContent(this.value)
      this.tinymce.on("input change", res => {
        console.log(this.tinymce.getContent(), 55)
        this.$emit('update:value', this.tinymce.getContent())
      });
    },
  }
};
</script>